<template>
  <!-- 二维码登录 -->
  <div class="erwei">
    <div class="img" v-loading="loading">
      <img width="200px" height="200px" :src="qrImg" />
      <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
    </div>
    <p>
      <svg aria-hidden="true" class="icon-wx">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b>扫描二维码</b>
    </p>
  </div>
</template>
<script>
//引入socket.io
import socketIo from "socket.io-client"
//引入qrcode
import qrcode from "qrcode"
//引入api
import * as api from "@/api/users"
//引入成功和失败扫码遮罩图片
import invalidImg from "@/assets/img/invalidQr.png"
import scanSuccessImg from "@/assets/img/scancode.png"
import storage from "@/utils/storage"
export default {
  props:{
    storageUserInfo:{
      required:true,
    }
  },
  data() {
    return {
      loading:false,
      qrImg: "",
      showQrMask: false,
      maskBg: { backgroundImage: `url(${scanSuccessImg})` },
    }
  },
  created() {
    let io = socketIo('wss://chst.vip')
    //监听连接的事件
    io.on('connectSuccess', async ({ sid }) => {
      storage.set('qf-sid',sid)
      this.getQrUrl(sid)
      
    })
    //无效二维码
    io.on('invalidCode', data => {
      //展示遮罩
      this.showQrMask = true;
      //显示无效的二维码遮罩样式
      this.maskBg.backgroundImage = `url(${invalidImg})`
    })
     io.on('scancodeSuccess', async ({ state, wechatCode, msg }) => {
      this.showQrMask = true
            this.maskBg.backgroundImage = `url(${scanSuccessImg})`
          if(state){
              let res = await api.wechatLoginApi(wechatCode);
                //将内容存到本地
                this.storageUserInfo(res.data)
                // console.log(res)
                //跳转页面
                this.$router.push("/")
          }else{
              console.error(msg)
          }
    })
  },
  methods:{
    // 获取二维码地址
     async getQrUrl(sid) {
      this.loading=true;
            //请求获取二维码地址
            let res = await api.getQrCodeApi(sid);
            // console.log(res)
            let { scanCodeUrl: qrcodeUrl } = res.data;
            //通过qrcode插件,生成二维码
            qrcode.toDataURL(qrcodeUrl, (err, img) => {
                if (err) {
                    throw err
                }
                // console.log(img)
                this.qrImg = img;

                //关掉遮罩
                this.showQrMask = false;
                this.loading=false;
            })

        },
        updateQr() {
            //获取本地存储的sid
            let sid = storage.get('qf-sid')
            this.getQrUrl(sid)
        }
  }
}
</script>
<style scoped lang="less">
.icon-wx {
  width: 25px !important;
  height: 25px !important;
  vertical-align: -7px;
  margin-right: 3px;
}

.erwei .img {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
}

img {
  position: absolute;
  left: 0;
}

.mask {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: #fff;
  position: absolute;
  left: 0;
  // background-image: url("../../assets/img/scancode.png");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
</style>